import React, { Component } from 'react'
import './style.scss'
import HeaderNav from './ui/headerNav'
import SearchBtn from '@/components/searchBtn'
import Content from './ui/Content'
import { fetchCategoryDataListAction } from '@/store/modules/cate'
import connect from './connect'
import { CSSTransition, SwitchTransition } from 'react-transition-group'

@connect
class Index extends Component {
  state = {
    navIndex: 0
  }

  setNavTab = navIndex => {
    this.setState({ navIndex })
  }

  componentDidMount() {
    this.props.dispatch(fetchCategoryDataListAction())
  }

  render() {
    const { navIndex } = this.state
    const { category, material } = this.props
    const data = [category, material]
    return (
      <div className='category'>
        <HeaderNav navIndex={navIndex} setNavTab={this.setNavTab} />
        <SearchBtn
          title='想吃什么搜索这里'
          onClick={() => {
            this.props.history.push('/search')
          }}
        />
        {/* 一定要用到条件渲染，只有有数据才渲染子组件 */}
        {data[navIndex] && (
          <SwitchTransition>
            <CSSTransition key={navIndex} timeout={500} classNames='fade'>
              <Content
                navIndex={navIndex}
                data={data[navIndex]}
                onItemClick={val => {
                  this.props.history.push(`/cate/${val}`)
                }}
              />
            </CSSTransition>
          </SwitchTransition>
        )}
      </div>
    )
  }
}

export default Index
